
<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 头部布局 公司信息-->
        <TreeTools
          :node-data="company"
          :is-root="true"
          @add-depts="addDepts"
        />

        <!-- 新增部门弹出框组件
        :show-dialog="showDialog" 自定义属性,传给子组件
        @close-dialog="showDialog=false接收子组件传过来的数据(当用户点击关闭时子组件通知父组件关闭)
        -->
        <!-- <AddDept
          :show-dialog="showDialog"
          :list="list"
          :node-data="nodeData"
          @close-dialog="showDialog=false"
          @add-dept="getDepartments"
        /> -->
        <AddDept
          ref="addDeptDialog"
          :show-dialog.sync="showDialog"
          :list="list"
          :node-data="nodeData"
          @add-dept="getDepartments"
        />

        <!-- 树形组件
           data : 树形组件数据
           prop : 指树形组件的文件或后代的键名
           default-expand-all :默认展开  默认值false
        -->
        <!-- :default-expand-all参考文档-->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 自定义树节点的内容，参数为 { node, data } -->
          <template v-slot="{data}">
            <!-- 组件传值属性名 如果有多个单词组成 建议使用-隔开,但在组件内部接收时 用的是小驼峰 -->
            <TreeTools
              :node-data="data"
              @del-depts="getDepartments"
              @add-depts="addDepts"
              @edit-depts="editDepts"
            />
            <!--
               @del-depts="getDepartments"
               @add-depts="showDialog=true" 子传父
             -->
          </template>
        </el-tree>
      </el-card>

    </div>

  </div>
</template>

<script>
import { transListToTree } from '@/utils/index'

import TreeTools from './components/tree-tools.vue'
import { reqGetDeparments } from '@/api/departments'

import AddDept from './components/add-dept.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      // 默认新增弹窗为false
      showDialog: false,
      // 存储子组件传来的数据
      nodeData: {},
      list: [],
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },

  methods: {
    // 获取组织架构初始化数据
    async getDepartments() {
      this.loading = true // 网络延缓时提升用户体验 参考el文档

      // 解构两次
      const { data: { depts, companyName }} = await reqGetDeparments()
      // console.log(depts)
      this.list = depts // 把最新的数据储存到list中
      this.departs = transListToTree(depts, '')
      // transListToTree(depts, '')
      this.company = { name: companyName, manager: '负责人', id: '' }
      // console.log(transListToTree(depts, ''))
      this.loading = false
    },
    // 新增
    addDepts(data) {
      this.showDialog = true
      this.nodeData = data
      // console.log(data)
      // console.log('data', this.nodeData)
    },
    // 编辑
    editDepts(data) {
      // 显示弹窗
      this.showDialog = true
      // 把自己部门的数据传递到弹出框
      this.nodeData = data
      // 获取部门的详情 父组件通过ref可以通过子组件内部的方法
      // dialog组件显示隐藏是异步的
      this.$nextTick(() => {
        this.$refs.addDeptDialog.getGetDepartDetail()
      })
    }

  }

}
</script>

<style scoped lang="scss">
.el-tree {
  .tree-card{
      padding: 10px 10px;
  }
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}

</style>
